<template>
    
    <section>
      <div class="head">
     <van-icon name="arrow-left" class = "left" @click = "back"/>
     <input type="text" :placeholder="this.$route.params.keyword" class="headinput">
  </div>
<van-dropdown-menu >
  <van-dropdown-item v-model="value" :options="option" />
  <van-dropdown-item title="筛选" ref="item">
        <van-cell center title="包邮">
          <template #right-icon>
            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="团购">
          <template #right-icon>
            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
</van-dropdown-item>
</van-dropdown-menu>
   <main>
      <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
 
  <ul class="goodsul">
    <li v-for="goods in goodslist" :key = goods.proid  @click = "detail(goods.proid)">
      <div class="img">
        <img  :src="goods.img1">
      </div>
      <div class="gooswenzi">
         <div class="title">
          {{goods.proname}}
         </div>
         <div class="price">
          ￥{{goods.originprice}}
         </div>
      </div>
    </li>
  </ul>
  <!-- <p>刷新次数: {{ count }}</p> -->
  
</van-pull-refresh> 
   </main>
    </section>
</template>
<script>
import axios from '@/Utils/server';
import {Toast} from "vant"
export default {
 name:"searchgoods-vue",
 data() {
    return {
      
      goodslist:[],
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      count: 0,
      isLoading: false,
    };
  },
 created(){
    //取出搜索页面传递过来的参数
    this.$route.params.keyword
    axios.get("/api/pro/search",{
      params:{
        keyword:this.$route.params.keyword
      }
    })
    .then(res=>{
      if(res.data.code == 200){
        this.goodslist = res.data.data
      }
    })
 },
 methods:{
  back(){
    this.$router.go(-1)
  },
  detail(goods){
    this.$router.push("/DetailPage/"+goods);
  },
  onConfirm() {
      this.$refs.item.toggle();
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
 }
}
</script>

<style scoped >
  .head{
    height: 2.5rem;
    background-color: white;
    display: flex;
    position: relative;
    align-items: center;
  }
  .headinput{
  height: 1.5rem;
   text-align: center;
   background:rgb(233, 231, 231);
   border-radius:1.5rem;
   border: none;
   width: 15rem;
  }
  .left{
    line-height: 2.5rem;
   width: 2.5rem;
   height: 2.5rem;
   text-align: center;
   font-size: 1rem;
  }
  .van-dropdown-menu__bar {
    box-shadow: 0px 0px 0px 0px rgb(100 101 102 / 12%);
 }
.goodsul{
  width: 100%;
 }
.goodsul li{
  width: 100%;
  height:5rem;
 background-color: #efefef;
 margin-top: 1rem;
 display: flex;
 justify-content: space-around;
}
.goodsul li .img{
  width: 5rem;
  height:5rem;
  /* background-color: red; */
  display: flex;
}
.goodsul li .img img{
  width: 4.25rem;
  height: 4.25rem;
  border-radius: .5rem;
  margin: auto;
}
.gooswenzi{
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: .5rem;
}
.title{
  font-size: .7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
main{
  flex: 1;
  height: 100%;
  overflow:auto;
}
section{
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
<style >
  .van-dropdown-menu__bar{
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.149);
    
  }
</style>